<template>
  <div class="video-container">
    <van-nav-bar
      title="视频详情"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="video-content">
      <div class="video-player">
        <video
          ref="videoRef"
          :src="video.url"
          :poster="video.cover"
          controls
          preload="metadata"
          @play="onPlay"
          @pause="onPause"
          @ended="onEnded"
        ></video>
      </div>

      <div class="video-info">
        <h1 class="title">{{ video.title }}</h1>
        <div class="meta">
          <span class="views">{{ video.views }}播放</span>
          <span class="time">{{ video.time }}</span>
        </div>
        <div class="desc">{{ video.description }}</div>
        
        <div class="actions">
          <div class="action-item" @click="onLike">
            <van-icon :name="video.isLiked ? 'like' : 'like-o'" :color="video.isLiked ? '#ff4757' : '#666'" />
            <span>{{ video.likes }}</span>
          </div>
          <div class="action-item" @click="onCollect">
            <van-icon :name="video.isCollected ? 'star' : 'star-o'" :color="video.isCollected ? '#ffd700' : '#666'" />
            <span>{{ video.collects }}</span>
          </div>
          <div class="action-item" @click="onShare">
            <van-icon name="share-o" />
            <span>分享</span>
          </div>
        </div>
      </div>

      <!-- 相关推荐 -->
      <div class="related-videos">
        <div class="section-title">相关推荐</div>
        <div class="video-list">
          <div v-for="item in relatedVideos" 
               :key="item.id" 
               class="video-item"
               @click="onVideoClick(item)">
            <div class="video-cover">
              <img :src="item.cover" :alt="item.title">
              <span class="duration">{{ formatDuration(item.duration) }}</span>
            </div>
            <div class="video-brief">
              <div class="video-title">{{ item.title }}</div>
              <div class="video-meta">
                <span>{{ item.views }}播放</span>
                <span>{{ item.duration | formatDuration }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()
const videoRef = ref(null)

const video = ref({
  title: 'TypeScript入门教程',
  views: 500,
  likes: 20,
  collects: 15,
  time: '2024-01-20',
  isLiked: false,
  isCollected: false,
  description: 'TypeScript是JavaScript的超集，添加了可选的静态类型和基于类的面向对象编程，本视频将带你快速入门TypeScript开发。',
  url: 'https://example.com/video.mp4',
  cover: 'https://picsum.photos/800/450'
})

const relatedVideos = ref([
  {
    id: 1,
    title: 'Vue.js 3.0 新特性详解',
    cover: 'https://picsum.photos/200/112',
    duration: 1500,
    views: 300
  },
  {
    id: 2,
    title: 'React Hooks 实战教程',
    cover: 'https://picsum.photos/200/112',
    duration: 1800,
    views: 400
  }
])

const formatDuration = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

const onClickLeft = () => {
  router.back()
}

const onLike = () => {
  video.value.isLiked = !video.value.isLiked
  video.value.likes += video.value.isLiked ? 1 : -1
  showToast(video.value.isLiked ? '已点赞' : '已取消点赞')
}

const onCollect = () => {
  video.value.isCollected = !video.value.isCollected
  video.value.collects += video.value.isCollected ? 1 : -1
  showToast(video.value.isCollected ? '已收藏' : '已取消收藏')
}

const onShare = () => {
  showToast('分享功能开发中')
}

const onVideoClick = (item) => {
  router.push(`/video/${item.id}`)
}

const onPlay = () => {
  console.log('视频开始播放')
}

const onPause = () => {
  console.log('视频暂停')
}

const onEnded = () => {
  console.log('视频播放结束')
}

onMounted(async () => {
  // 获取视频详情
  const id = route.params.id
  // TODO: 调用接口获取视频详情
})

onUnmounted(() => {
  // 清理视频资源
  if (videoRef.value) {
    videoRef.value.pause()
    videoRef.value.src = ''
    videoRef.value.load()
  }
})
</script>

<style lang="scss" scoped>
@use '@/styles/mixins.scss' as *;

.video-container {
  min-height: 100vh;
  background-color: #f7f8fa;

  .video-content {
    .video-player {
      width: 100%;
      background: #000;

      video {
        width: 100%;
        max-height: 56.25vw; // 16:9 比例
        object-fit: contain;
      }
    }

    .video-info {
      padding: 16px;
      background: #fff;
      margin-bottom: 8px;

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #323233;
        margin-bottom: 8px;
        line-height: 1.4;
      }

      .meta {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        font-size: 14px;
        color: #969799;

        span {
          margin-right: 16px;

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .desc {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 16px;
      }

      .actions {
        display: flex;
        justify-content: space-around;
        padding-top: 16px;
        border-top: 1px solid #f5f5f5;

        .action-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          .van-icon {
            font-size: 24px;
            margin-bottom: 4px;
          }

          span {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }

    .related-videos {
      background: #fff;
      padding: 16px;

      .section-title {
        font-size: 16px;
        font-weight: 500;
        color: #323233;
        margin-bottom: 16px;
      }

      .video-list {
        .video-item {
          display: flex;
          margin-bottom: 16px;
          cursor: pointer;

          &:last-child {
            margin-bottom: 0;
          }

          .video-cover {
            position: relative;
            width: 160px;
            height: 90px;
            margin-right: 12px;
            border-radius: 4px;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .duration {
              position: absolute;
              right: 4px;
              bottom: 4px;
              padding: 0 4px;
              background: rgba(0, 0, 0, 0.6);
              color: #fff;
              font-size: 12px;
              border-radius: 2px;
            }
          }

          .video-brief {
            flex: 1;
            overflow: hidden;

            .video-title {
              font-size: 14px;
              color: #323233;
              margin-bottom: 8px;
              line-height: 1.4;
              @include text-ellipsis;
            }

            .video-meta {
              font-size: 12px;
              color: #969799;

              span {
                margin-right: 12px;

                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
